<!-- <div class="card">
  <h4 class="card-header">Login</h4>
  <div class="card-body">
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
          <div class="form-group">
              <label for="username">Username</label>
              <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
              <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                  <div *ngIf="f.username.errors.required">Username is required</div>
              </div>
          </div>
          <div class="form-group">
              <label for="password">Password</label>
              <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
              <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                  <div *ngIf="f.password.errors.required">Password is required</div>
              </div>
          </div>
          <div class="form-group">
              <button [disabled]="loading" class="btn btn-primary">
                  <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
                  Login
              </button>
              <a routerLink="../register" class="btn btn-link">Register</a>
          </div>
      </form>
  </div>
</div> -->


<div class="card">
  <nz-card nzHoverable style="width:500px" [nzCover]="coverTemplate">
    <nz-card-meta nzTitle="登陆麻雀组织权限管理系统" nzDescription="用户名: ROOT 密码: password"></nz-card-meta>
    <br />
    <br />
    <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit()">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">用户名</nz-form-label>
        <nz-form-control nzHasFeedback [nzSpan]="20" nzErrorTip=" 请输入用户名 " >
          <nz-input-group [nzSuffix]="suffixUsername">
            <input nz-input placeholder=" 请输入用户名 " name="username" formControlName="username" required />
          </nz-input-group>
          <ng-template #suffixUsername>
            <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="validateForm.controls.username.value.length>0" (click)="validateForm.controls.username.setValue('')" ></i>
          </ng-template>

        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4"> 密&nbsp;&nbsp;&nbsp;&nbsp;码 </nz-form-label>
        <nz-form-control nzHasFeedback [nzSpan]="20" nzErrorTip=" 请输入密码 " >
          <nz-input-group [nzSuffix]="suffixPassword">
            <input nz-input name="password" formControlName="password" [type]="passwordVisible ? 'text' : 'password'" placeholder=" 请输入密码 " required />
          </nz-input-group>
          <ng-template #suffixPassword>
            <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="validateForm.controls.password.value.length>0" (click)="validateForm.controls.password.setValue('')" ></i>
            <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible" ></i>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="20" [nzOffset]="4">
          <div nz-row class="login-form-margin">
            <div nz-col [nzSpan]="12">
              <label nz-checkbox formControlName="remember">
                <span> 记住我 </span>
              </label>
            </div>
            <div nz-col [nzSpan]="12" style="text-align: right;">
              <a class="login-form-forgot"> 忘记密码?</a>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24" [nzOffset]="0" style="text-align: center;">
          <button type="submit" nz-button style="width: 100px;" nzType="primary" ng-disabled="form.$invalid" > 登陆 </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>
  <ng-template #coverTemplate>
    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
  </ng-template>

</div>


